/*
 * 产品分类列表
 * @Author: LuoQianJun 
 * @Date: 2018-01-25 16:50:25
 * @Last Modified by: ljb
 * @Last Modified time: 2018-01-31 17:13:19
 */ 
 <template>
    
    <div class="v-admin-product-category-index">

        <Table :columns="columns" :loading="loading" :data="productCategories"></Table>

    </div>    


 </template>
 
<script>

import Button from 'iview/src/components/button';

import Icon from 'iview/src/components/icon';

import expandRow from './expand-row';

export default {

    name: 'category-index',

    props: ['loading','product-categories','super-categories'],

    data: function() {	

        return {

            columns: [
                 
                {
                    type: 'expand',
                    width: 60,
                    render: (h, params) => {
                        return h(expandRow, {
                            props: {
                                row: params.row,
                            },
                            on : {
                                edit : this.editCategory,
                                delete: this.deleteCategory
                            }
                        })
                    }
                },

                {
                    title: '顶级分类名称',
                    key: 'name',
                    align: 'center',
                    render: (h,{row}) => {
                        return <div> { row.name || '-' } </div>
                    }
                },

                {
                    title: '描述',
                    key: 'description',
                    align: 'center',
                    render: (h,{row}) => {
                        return <div> { row.description || '-' } </div>
                    }
                },
                {
                    title: '封面图',
                    key: 'thumb',
                    align: 'center',
                    render: (h,{row}) => {
                        return <div>
                            {   
                                row.thumb
                                ? <img src={ row.thumb } alt="无" width="50%"/>
                                : '无' 
                            }
                        </div>
                    }
                },
                {
                    title: '优先级',
                    key: 'priority',
                    align: 'center',
                    render: (h,{row}) => {
                        return <div> { row.priority || 0 } </div>
                    }
                },

                {
                    title: '创建时间',
                    key: 'created_at',
                    align: 'center',
                    render: (h,{row}) => {
                        return <div> { row.created_at || '-' } </div>
                    }
                },

                 {
                    title: '操作',
                    align: 'center',
                    width: 200,
                    render: (h, {row}) => {
                        return (
                            <div>
                                <Button size="small" style={{ marginRight: '5px' }} on-click={() => {this.$emit('edit',[row.id, 'is_top'])}} type="primary">修改分类</Button>
                                {
                                    row.get_sub_categories.length === 0
                                    ?<Button size="small" on-click={() => {this.$emit('delete',row.id)}} type="error">删除分类</Button>
                                    : ''
                                }
                            </div>)
                    }
                }
            ],
             
        }

    },

    methods: {
        
        /**
         * 编辑产品类别
         * @param  {array} _array {产品类别数组信息}
         * @return {undefined}
         */
        editCategory(_array){

            this.$emit('edit',_array);

        },

         /**
         * 删除产品类别
         * @param  {string} id {类别的id}
         * @return {undefined}
         */
        deleteCategory(id){

            this.$emit('delete',id);

        }

    }
 }
 </script>